<template>
  <div class="dashboard">
    <el-row class="hero-section">
      <el-col :span="24">
        <div class="hero-content">
          <h1>一站式英语学习平台，从听说读写到职场应用<br>全方位突破语言壁垒</h1>
          <p class="subtitle">从基础到高阶的完整课程体系，语法、词汇、阅读分层教学，适配不同学习目标</p>
          <el-button type="primary" size="large" @click="$router.push('/home')" class="cta-button">
            开始学习
          </el-button>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="30" class="features-section" justify="center">
      <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-card course-card">
          <div class="feature-icon">
            <el-icon size="40"><Reading /></el-icon>
          </div>
          <h3>系统化课程</h3>
          <p>从基础到高级的完整课程体系<br>循序渐进提升英语水平</p>
          <el-button link type="primary" @click="$router.push('/home')">查看课程</el-button>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-card listening-card">
          <div class="feature-icon">
            <el-icon size="40"><Headset /></el-icon>
          </div>
          <h3>听说训练</h3>
          <p>丰富的听力材料和口语练习<br>培养地道英语表达能力</p>
          <el-button link type="primary" @click="$router.push('/home')">开始练习</el-button>
        </div>
      </el-col>
      
      <!-- <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-card vocabulary-card">
          <div class="feature-icon">
            <el-icon size="40"><Document /></el-icon>
          </div>
          <h3>词汇积累</h3>
          <p>科学记忆方法结合语境学习<br>快速扩充词汇量</p>
          <el-button link type="primary" @click="$router.push('/vocabulary')">进入词库</el-button>
        </div>
      </el-col> -->
      
      <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-card phonics-card">
          <div class="feature-icon">
            <el-icon size="40"><Star /></el-icon>
          </div>
          <h3>自然拼读</h3>
          <p>系统学习字母与发音的对应关系<br>提高单词拼读和记忆能力</p>
          <el-button link type="primary" @click="$router.push('/phonics')">开始学习</el-button>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-card phonetic-card">
          <div class="feature-icon">
            <el-icon size="40"><Position /></el-icon>
          </div>
          <h3>音标学习</h3>
          <p>标准国际音标学习与练习<br>掌握准确的英语发音技巧</p>
          <el-button link type="primary" @click="$router.push('/phonetic-symbol')">学习音标</el-button>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-card grammar-card">
          <div class="feature-icon">
            <el-icon size="40"><MagicStick /></el-icon>
          </div>
          <h3>语法掌握</h3>
          <p>系统梳理英语语法规则<br>轻松应对各种语言场景</p>
          <el-button link type="primary" @click="$router.push('/grammar')">语法精讲</el-button>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-card statistics-card">
          <div class="feature-icon">
            <el-icon size="40"><DataLine /></el-icon>
          </div>
          <h3>数据追踪</h3>
          <p>实时学习进度跟踪<br>个性化学习建议助您高效进步</p>
          <el-button link type="primary" @click="$router.push('/learning-statistics')">查看我的数据</el-button>
        </div>
      </el-col>
    </el-row>

    <el-row class="cta-section">
      <el-col :span="24">
        <div class="cta-content">
          <h2>开启您的英语学习之旅</h2>
          <p>立即加入 thousands of 学习者，体验免费的英语学习方式</p>
          <el-button type="primary" size="large" @click="$router.push('/home')">
            浏览课程
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { 
  Reading, 
  Headset, 
  Document, 
  MagicStick, 
  DataLine, 
  Star,
  Position
} from '@element-plus/icons-vue'

export default {
  name: 'Dashboard',
  components: {
    Reading,
    Headset,
    Document,
    MagicStick,
    DataLine,
    Star,
    Position
  }
}
</script>

<style scoped lang="scss">
@use "../assets/styles/dashboard";
</style>